<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>积分商城</title>
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

    <style>
        body {
            font-family: 微软雅黑;
        }

        .layui-col-md12 {
            width: 100%;
        }

        .layui-form-label {
            width: 130px;
            position: relative;
            float: left;
            display: block;
            padding: 9px 15px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }

        .layui-form input[type=radio] {
            display: block;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        .layui-input-block, .layui-input-inline {
            position: relative;
        }

        .layui-input, .layui-textarea {

        }

        .layui-form-item {
            text-align: center;
            margin-bottom: 5px;
            font-size: 13px;
            height: 30px;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 999;
        }

        .header .headcon {
            width: 1200px;
            margin: auto;
            display: flex;
            align-items: center;
            color: #1E9FFF;
            padding: 30px 0;
        }

        .headcon .title {
            font-size: 36px;
            font-weight: 700;
        }

        .szbtn {
            background-color: #1E9FFF;
            color: #fff;
            position: absolute;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 10px;
            position: absolute;
            top: 10;
            right: 20px;
            cursor: pointer;
        }

        .btn-db {
            border: none;
            background-color: #1E9FFF;
            color: #fff;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 10px;
        }

        .tit {
            font-size: 18px;
        }

        .tit::before {
            content: '●';
            margin-right: 10px;
        }

        .jcinfo {
            font-size: 30px;
            font-weight: 900;
        }

        .item {
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        .item3 {
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        .item3 div {
            width: 33%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .item4 {
            display: flex;
            align-items: center;
        }

        .item4 div {
            width: 25%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .layui-table {
            color: black;
        }

        .layui-table thead th {
            background-color: rgb(0 135 250 / 40%) !important;
            height: 38px
        }

        .layui-table thead tr {
            background-color: rgb(0 135 250 / 40%) !important;
            height: 38px
        }

        .img-border {
            border: solid 1px;
        }

        .img-type::before {
            margin-right: 10px;
        }
    </style>
</head>
<body style="background-color: #f4f4f4 !important;">

<div style="margin: 0 auto; max-width: 1920px; background-color: #fff; padding: 30px 0;">
    <div class="layui-row">
        <div class="layui-col-xs3" style="padding-left: 10px;">
            <div style="margin: 10px 0; z-index: 1;">
                <img style="width: 280px; height: 280px; display: inline-block; vertical-align: middle;"
                     th:src="${dto.img}">
                <div style="z-index: 2; position: absolute; left: 10px;; top: 10px;">
                    <img th:if="${dto.id} eq '新品'" style="width: 40px; height: 40px;" src="/img/xinpin.png">
                    <img th:if="${dto.id} eq '爆品'" style="width: 40px; height: 40px;" src="/img/baopin.png">
                </div>
            </div>
            <div style="margin: 10px 0;">
            </div>
        </div>
        <div class="layui-col-xs9">

            <div style="margin: 0 30px;">
                <div class="jcinfo">
                    <div style="margin-bottom: 5px; width: 80%;">
                        <span>[[${dto.name}]]</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="font-size: 24px;">[[${dto.code}]]</span>
                    </div>
                </div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
                <div style="text-align: right; font-size: 18px; font-weight: 700; color: #FF5722;">
                    库存：[[${dto.stockNum}]]
                </div>

                <div style="height: 20px;"></div>
                <div class="tit" style="font-weight: 700;">商品价格：</div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
                <div style="height: 10px;"></div>
                <div class="item3">
                    <div style="text-align: center;">
                        <div style="text-align: center; width: 100%; font-size: 36px; font-weight: 700; color: #FF5722;">
                            --
                        </div>
                        <div style="text-align: center; width: 100%; font-size: 12px; font-weight: 400;">
                            --
                        </div>
                    </div>
                </div>

                <div style="height: 30px;"></div>
                <div class="tit" style="font-weight: 700;">商品信息：</div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 10px 0;"></div>
				<p class="item3" th:utext="${dto.detail}">
				</p>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="inExchange">
    <div class="layui-col-md12">
        <div class="layui-form-item" style="margin-top: 15px;">
            <div class="layui-inline" style="display: flex;">
                <label class="layui-form-label"><span style="color: red">*</span>调拨公司：</label>
                <div class="layui-input-block" style="margin-left: 0; position: relative;">
                    <input type="text" class="layui-input buttontext" style="width: 250px;"
                           name="vGsMc" id="vGsMc" autocomplete="off"
                           readonly lay-verify="required"/>
                    <i class="layui-icon layui-icon-more getMore" style="position: absolute;top: 11px;right: 9px;"
                       onclick="getMore('vGsMc',null,'公司名称',null,false, true);"
                       getType="promoteUnit"></i>
                </div>
            </div>
            <div style="color: red;text-align:center;margin-top: 25px; font-size: 16px; padding: 10px;">
				<div style="color: red;text-align:left; margin-left: 80px;">
                	<span>特别提醒：<br>1、逸思精品调拨后，不可退回！<br>2、请确认好调拨信息再执行操作！<br>3、该操作一经确定即完成调拨！</span>
				</div>
            </div>
        </div>
    </div>
</script>

<script type="text/javascript">

    var $, layer, laydate, form, table, wherestr = {};
    layui.use(['table', 'laydate', 'form', 'layer', 'jquery', 'element', 'laypage'], function () {
        $ = layui.$, layer = layui.layer, laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;

        $('body').on('click', '.btn-db', function () {
            let choiceShop = tableOfChoiceshopAllot.getData()
            let nums = $('#id_total_num').html() * 1
            if (!nums > 0) {
                $.modal.msgWarning('请购买至少一种商品！');
                return
            }
        	
        	// 判断数量是否足够调拨
        	if(tableOfChoiceshopAllot.isAbleAllot() == false) {
                layer.msg('不能低于最少数量')
        		return;
        	}

            layer.open({
                type: 1
                , title: "请选择调拨公司"
                , shade: 0.3
                , area: ['500px', '300px']
                , offset: '20%'
                , content: $("#inExchange").html()
                , btn: ['确定', '取消']
                , yes: function (index) {
                    if (vGsMc) {
                        showloadings(true);

                        $.post("/hr/choiceshop/commodityAllocation", {
                            'choiceShop': JSON.stringify(choiceShop),
                            'corporate': JSON.stringify({
                                'vGsBm': vGsBm,
                                'vGsJc': vGsJc,
                                'vGsMc': vGsMc,
                            })
                        }, function (res) {
                            showloadings(false);
                            layer.closeAll()
                            layer.msg(res.msg)
                            // vGsMc = null
                        });
                    } else {
                        $.modal.msgWarning('请选择要调拨的公司！');
                    }
                }
                , btn2: function () {
                    layer.closeAll();
                }
            });
        })
    });
</script>
</body>
</html>